/**
 * Created by bgy on 2016/12/5.
 * 申请质检
 */
import React from 'react';
import {Link, hashHistory} from 'react-router';

import HeaderTitle from '../../components/common/HeaderTitle';
import FruitSelection from '../../components/common/FruitSelection';
import AttachmentMgt from '../common/AttachmentMgtNew';

var AppFQI = React.createClass({
  getInitialState: function () {
    let picUploadParam = [
      {
        "appKey": "b2b",
        "ownType": "qcApply",
        "ownCode": "1",//质检申请记录单据号
        "fileUseCode": "orchardPicture",
        "fmFiles": []
      }, {
        "appKey": "b2b",
        "ownType": "qcApply",
        "ownCode": "1",//质检申请记录单据号
        "fileUseCode": "productionPicture",
        "fmFiles": []
      }, {
        "appKey": "b2b",
        "ownType": "qcApply",
        "ownCode": "1",//质检申请记录单据号
        "fileUseCode": "packagePicture",
        "fmFiles": []
      }, {
        "appKey": "b2b",
        "ownType": "qcApply",
        "ownCode": "1",//质检申请记录单据号
        "fileUseCode": "goodPicture",
        "fmFiles": []
      }
    ];
    let qcApply = {
      fruitName: '',
      area: '',
      scale: '',
      yield: '',

    }
    let qcApplyObj = JSON.parse(window.localStorage.getItem('qcApply'));
    if (qcApplyObj) {
      qcApply = qcApplyObj;
    }
    return {
      phoneDisabled: '',
      loadDisabled: '',
      loginBtn: 'disabled',
      codeInput: '',
      gysType: '',
      picUploadParam: picUploadParam,
      qcApply: qcApply,
    }
  },

  onChildChanged: function (code, res) {
    let picUploadParam = this.state.picUploadParam;
    for (let i = 0; i < picUploadParam.length; i++) {
      if (picUploadParam[i].fileUseCode == code) {
        picUploadParam[i].fmFiles = res;
        break;
      }
    }
    this.state.picUploadParam = picUploadParam;
  },

  handlerClick: function () {
    let picUploadParam = this.state.picUploadParam;
    let QcApplay = {};
    QcApplay.area = this.refs.area.value;
    QcApplay.scale = this.refs.scale.value;
    QcApplay.scaleText = this.refs.scaleText.value;
    QcApplay.yield = this.refs.yield.value;
    QcApplay.yieldText = this.refs.yieldText.value;
    QcApplay.area = this.refs.area.value;
    window.localStorage.setItem('qcApply', JSON.stringify(QcApplay));
    window.localStorage.setItem('picUploadParam', JSON.stringify(picUploadParam));
    const path = 'selectQTWay';

    hashHistory.push(path);
  },
  setSelectValue:function (refcode,value,event) {
    var selected = event.target;
    this.refs[refcode+'Text'].value = selected.innerHTML;
    this.refs[refcode].value = value;
    event.target.parentNode.parentNode.classList.add('hidden');
  },
  showDropDownDiv:function (event) {
    let input = event.target;
    input.parentNode.nextSibling.classList.remove('hidden');
  },
  render: function () {
    return (
      <div className="appfqi">
        <HeaderTitle title="申请质检"/>
        <div className="form" style={{padding:'1rem'}}>
          <div className="form-item">
            <label htmlFor="">水果名称</label><FruitSelection></FruitSelection>
            <Link to=""><img className="pull-down-pic" src="images/u353.png"/></Link>
          </div>
          <div className="form-item">
            <label htmlFor="">地域</label><input type="hidden" defaultValue={this.state.qcApply.area} ref="area"/><input type="text" defaultValue={this.state.qcApply.areaText} ref='areaText' placeholder="请输入产地"/><img className="pull-down-pic" src="images/u353.png"/>
          </div>
          <div className="form-item">
            <label htmlFor="">规模</label>
            <input type="hidden" ref="scale" defaultValue={this.state.qcApply.scale}/><input type="text" defaultValue={this.state.qcApply.scaleText} ref='scaleText' placeholder="请输入规模"/>
            <img onClick={this.showDropDownDiv} className="pull-down-pic" src="images/u353.png"/>
          </div>
          <div className="form-item hidden">
            <div className="dropDownList">
              <span className="select-item" onClick={this.setSelectValue.bind(this,'scale','A')}>10亩以下</span>
              <span className="select-item" onClick={this.setSelectValue.bind(this,'scale','B')} >10亩~20亩</span>
              <span className="select-item" onClick={this.setSelectValue.bind(this,'scale','C')}>20亩以上</span>
            </div>
          </div>
          <div className="form-item">
            <label htmlFor="">产量</label>
            <input type="hidden" ref="yield"/><input defaultValue={this.state.qcApply.yieldText} type="text" ref='yieldText' placeholder="请输入产量"/>
            <img onClick={this.showDropDownDiv} className="pull-down-pic" src="images/u353.png"/>
          </div>
          <div className="form-item hidden">
            <div className="dropDownList">
              <span className="select-item" onClick={this.setSelectValue.bind(this,'yield','A')}>10T</span>
              <span className="select-item" onClick={this.setSelectValue.bind(this,'yield','B')} >10~20T</span>
              <span className="select-item" onClick={this.setSelectValue.bind(this,'yield','C')}>20T以上</span>
            </div>
          </div>
        </div>
        <div style={{height:'20px',width:'100%'}}></div>
        <div className="form" style={{padding:'1rem'}}>
          <div className="form-item pic">
            <label htmlFor="">果园图片</label>
            <AttachmentMgt addButtonSrc='images/uploadPic.png' allowMultiple={true} callbackParent={this.onChildChanged.bind(this,'orchardPicture')}></AttachmentMgt>
          </div>
          <div className="form-item pic">
            <label htmlFor="">生产线图片</label>
            <AttachmentMgt addButtonSrc='images/uploadPic.png' allowMultiple={true} callbackParent={this.onChildChanged.bind(this,'productionPicture')}></AttachmentMgt>
          </div>
          <div className="form-item pic">
            <label htmlFor="">包装图片</label>
            <AttachmentMgt addButtonSrc='images/uploadPic.png' allowMultiple={true} callbackParent={this.onChildChanged.bind(this,'packagePicture')}></AttachmentMgt>
          </div>
          <div className="form-item pic last">
            <label htmlFor="">产品图片</label>
            <AttachmentMgt addButtonSrc='images/uploadPic.png' allowMultiple={true} callbackParent={this.onChildChanged.bind(this,'goodPicture')}></AttachmentMgt>
          </div>
          <button className="button button-pill button-primary btn-green btn-long" onClick={this.handlerClick} ref="loginBtn">下一步</button>
        </div>
      </div>
    )
  }
})
export default AppFQI;
